<template>
    <view>
        <custom><template #backText>中营慈善</template></custom>
        <nBar title="募捐总额" right_title="我的慈善账户" right_uri="/project/charity/myPage"></nBar>
        <nGrid row="2" col="2" :border="true" :list="grid_charity_total" :value_info="charity_amount_info" class_name="text-gray"
            class_value="margin-top-10 text-nddyny text-xl"></nGrid>
        <view class="bg-white padding-lr-30">
            <nDesc>
                <template #top>
                    慈善基金用途
                </template>
                <template #bottom>
                    主要用于救助一些五保户、特困户以及突发事件的特殊股东，慈善救助项目不用偿还。
                </template>
            </nDesc>
            <nDesc>
                <template #top>
                    慈善基金筹备
                </template>
                <template #bottom>
                    全体股东可以用金股、金券、金豆、消费红包进行慈善捐赠。<br>
                    基金设有独立账户，专款专用，所有进出账目、救助对象全部公开，接受全体股东监督。<br>
                    慈善救助以消费红包的形式发放。
                </template>
            </nDesc>
        </view>
        <nBar title="我要慈善捐赠" right_title="我的慈善账户" right_uri="/project/charity/myPage"></nBar>
        <text class="flex justify-center padding-bottom-20 bg-white solid-bottom text-nddyny">
            我的总资产
        </text>
        <nGrid col="4" row="1" :list="grid_my_asset" :value_info="$store.state.user.user_asset_info" class_name="text-gray"
            class_value="margin-top-10 text-nddyny"></nGrid>
        <view class="padding-lr-30 bg-white">
            <nFormItem title="金股" placeholder="请填写捐赠金股数量" format="number" :data.sync="data" field="gold_share_amount"></nFormItem>
            <nFormItem title="红包" placeholder="请填写捐赠红包数量" format="number" :data.sync="data" field="balance_amount"></nFormItem>
            <nFormItem title="金券" placeholder="请填写捐赠金券数量" format="number" :data.sync="data" field="gold_coupon_amount"></nFormItem>
            <nFormItem title="金豆" placeholder="请填写捐赠金豆数量" format="number" :data.sync="data" field="gold_bean_amount"></nFormItem>
            <nFormButton title="确认慈善捐赠" :tap="submitAsset2charity"></nFormButton>
        </view>
        <nBar title="捐赠排行榜" right_title="我的慈善账户" right_uri="/project/charity/myPage"></nBar>
        <list :list="data.list" title="还没有捐赠记录">
            <template #list>
                <view class="cu-list grid col-4">
                    <view class="cu-item">
                        <view class="text-nddyny">金股</view>
                    </view>
                    <view class="cu-item">
                        <view class="text-nddyny">红包</view>
                    </view>
                    <view class="cu-item">
                        <view class="text-nddyny">金券</view>
                    </view>
                    <view class="cu-item">
                        <view class="text-nddyny">金豆</view>
                    </view>
                    <template v-for="(info, key) in data.list">
                        <template v-for="(field, key) in rank_fields">
                            <view class="cu-item">
                                <template v-if="info[field+'_amount']">
                                    <view class="flex margin-left-20">
                                        <avatar avatar_size="" :avatar_url="info[field+'_avatar']"></avatar>
                                        <text class="width-100p">{{info[field+'_amount'] | floor}}</text>
                                    </view>
                                    <view class="margin-left-20 text-gray margin-top-10 text-sm text-left">{{info[field+'_nickname']}}</view>
                                </template>
                            </view>
                        </template>
                    </template>
                </view>
            </template>
        </list>
    </view>
</template>

<script>
    export default {
        data() {
            const form = {
                gold_share_amount: '',
                gold_coupon_amount: '',
                gold_bean_amount: '',
                balance_amount: '',
            };
            return {
                rank_fields: [
                    'gold_share',
                    'balance',
                    'gold_coupon',
                    'gold_bean',
                ],
                grid_charity_total: {
                    sum_gold_share_amount: {
                        name: '捐赠金股'
                    },
                    sum_balance_amount: {
                        name: '捐赠提现红包'
                    },
                    sum_gold_coupon_amount: {
                        name: '捐赠金券'
                    },
                    sum_gold_bean_amount: {
                        name: '捐赠金豆'
                    },
                },
                charity_amount_info: {
                    count_user: '',
                    sum_gold_share_amount: '',
                    sum_balance_amount: '',
                    sum_gold_coupon_amount: '',
                    sum_gold_bean_amount: '',
                },
                grid_my_asset: {
                    gold_share_amount: {
                        name: '金股'
                    },
                    balance_amount: {
                        name: '提现红包'
                    },
                    gold_coupon_amount: {
                        name: '金券'
                    },
                    gold_bean_amount: {
                        name: '金豆'
                    },
                },
                data: {
                    formtag: {},
                    form: this.$nddyny.object.copy(form),
                    formbak: this.$nddyny.object.copy(form),
                    offset: 0,
                    limit: 15,
                    stop: false,
                    list: [],
                },
            }
        },
        onLoad() {
            this.getList(this.$api.list_action_page_init);
        },
        onReachBottom() {
            this.getList(this.$api.list_action_add);
        },
        methods: {
            getList(action) {
                this.$api.list(this, {
                    action,
                    url: '/project/charity/page',
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.data.list = this.data.list.concat(Result.result.list);
                        if (Result.result.charity_amount_info) {
                            this.charity_amount_info = Result.result.charity_amount_info;
                        }
                    }
                });
            },
            submitAsset2charity() {
                this.$api.post(this, {
                    loading: '慈善捐赠中',
                    url: '/project/charity/asset2charity',
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        this.$user.updateUserAssetInfo(this);
                        this.data.form = this.$nddyny.object.copy(this.data.formbak);
                        this.getList(this.$api.list_action_force_init);
                        this.$store.commit('userToastSuccess', '慈善捐赠成功');
                    }
                });
            }
        },
    }
</script>
